<script setup lang="ts">
import Title from './Title.vue';
import { ref, onMounted } from 'vue';
import { init } from '../echarts-utils.ts';
import type { ECOption } from '../echarts-utils.ts';
import 'echarts-liquidfill';

// 总数
const total = ref('216908人');

const chart = ref<HTMLElement>();

onMounted(() => {
  const myChart = init(chart.value);
  myChart.setOption({
    series: [
      {
        type: 'liquidFill',
        radius: '70%',
        data: [0.55, 0.4, 0.36],
        waveAnimation: true, //动画
        animationDuration: 3,
        animationDurationUpdate: 0,
        label: {
          formatter: obj =>
            `预约量\n${((obj.value as number) * 100).toFixed(0)}%`,
          fontSize: 16
        },
        outline: {
          borderDistance: 8,
          itemStyle: {
            borderColor: '#294D99',
            borderWidth: 8,
            shadowBlur: 20,
            shadowColor: 'rgba(0, 0, 0, 0.25)'
          }
        }
      }
    ],
    grid: {
      left: 0,
      right: 0,
      bottom: 0,
      top: 0
    }
  } as ECOption);
});
</script>

<template>
  <div class="lt fit column">
    <div class="flex justify-between">
      <Title title="实时游客统计"></Title>
      <div class="sub_title">
        可预约总数
        <span>200000</span>
        人
      </div>
    </div>
    <ul class="total row justify-between q-px-md">
      <li class="flex flex-center" v-for="(item, i) in total" :key="i">
        {{ item }}
      </li>
    </ul>
    <div ref="chart" class="chart col"></div>
  </div>
</template>

<style scoped lang="scss">
.lt {
  background: url(../images/dataScreen-main-lt.png) no-repeat;
  .sub_title {
    position: relative;
    top: 30px;
    color: #fff;
    span {
      color: #fea917;
      font-style: italic;
    }
  }
  .total {
    margin-top: 40px;
    color: #29fcff;
    li {
      width: 50px;
      height: 50px;
      font-size: 30px;
      background: url(../images/total.png) no-repeat;
      background-size: cover;
    }
  }
}
</style>
